import emitter from "../utils/eventbus";
import * as d3 from "d3";

/**
 * 
 * @param $ 
 * @param d3CanvasRef 
 * @param width 
 * @param heightStart 
 * @param heightEnd 
 */
export function initDrillPipe($: any, d3CanvasRef: any, width: number, Start: number, height: number) {
    let id: string = $.attr("id");
    const d3Canvas = d3CanvasRef;//画布信息
    const widthCenter = d3Canvas.offsetWidth / 2 //中心线
    const tubing = $.append("rect")
        .attr("x", widthCenter - width / 2)  // 矩形左上角的 x 坐标
        .attr("y", Start)  // 矩形左上角的 y 坐标
        .attr("width", width)  // 矩形的宽度
        .attr("height", height)  // 矩形的高度
        .attr("fill", "steelblue");  // 填充颜色
    const drag = d3.drag()
        .on("drag", (event) => {
            const dy = event.dy;
            // 判断是上半部分还是下半部分拖动
            if (event.y < tubing.attr("y") + tubing.attr("height") / 2) {
                // 上半部分拖动，调整顶部位置
                const newY = parseInt(tubing.attr("y")) + dy;
                tubing.attr("y", newY);
                tubing.attr("height", parseInt(tubing.attr("height")) - dy);
            } else {
                // 下半部分拖动，调整底部位置
                tubing.attr("height", parseInt(tubing.attr("height")) + dy);
            }
        });
    tubing.call(drag);
    emitter.on(id, (transform: any) => {
        tubing.attr("transform", transform);
    });

    return tubing
}